﻿<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>Shopholic</title>
    <!-- SEO Meta
  ================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="distribution" content="global">
    <meta name="revisit-after" content="2 Days">
    <meta name="robots" content="ALL">
    <meta name="rating" content="8 YEARS">
    <meta name="Language" content="en-us">
    <meta name="GOOGLEBOT" content="NOARCHIVE">
    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" type="text/css" href="css/custom.css?v=1.3">
    <link rel="stylesheet" type="text/css" href="css/responsive.css?v=1.3">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<style type="text/css">
    .error {
        color: red;
    }
</style>

<body>
<div class="se-pre-con"></div>
<div class="main">

    <!-- HEADER START -->
    <script src="js/head.js"></script>
    <!-- HEADER END -->

    <!-- Bread Crumb STRAT -->
    <div class="banner inner-banner1">
        <div class="container">
            <section class="banner-detail center-xs">
                <h1 class="banner-title">注册</h1>
                <div class="bread-crumb right-side float-none-xs">
                    <ul>
                        <li>
                            <a href="index.html"><i class="fa fa-home"></i>首页</a>/
                        </li>
                        <li><span>注册</span></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <!-- Bread Crumb END -->

    <!-- CONTAIN START -->
    <section class="checkout-section ptb-60">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row justify-content-center">
                        <div class="col-xl-8 col-lg-8 col-md-8 ">
                            <form class="main-form full" id="register" action="/user/RegisterServlet" method="post">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="heading-part mb-20">
                                            <h2 class="form-title heading">请输入你的身份信息</h2>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="input-box">
                                            <label for="userName">用户名</label>
                                            <input type="text" id="userName" name="username"><span id="msg"></span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="input-box">
                                            <label for="tel">手机号</label>
                                            <input type="text" id="tel" name="usertel">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="input-box">
                                            <label for="email">Email</label>
                                            <input id="email" type="text" name="email">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="input-box">
                                            <label for="pwd">密码</label>
                                            <input id="pwd" type="password" name="userpwd">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="input-box">
                                            <label for="rePwd">确认密码</label>
                                            <input id="rePwd" type="password" name="repwd">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="d-flex justify-content-center">
                                            <button name="submit" type="submit" class="btn btn-success w-25 mr-5">提交
                                            </button>
                                            <button name="reset" type="reset" class="btn btn-primary w-25">重置</button>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <hr>
                                        <div class="new-account align-center mt-20"><span>已有账号？</span>
                                            <a class="link" title="Register with Shopholic" href="login.html">请登录>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTAINER END -->

    <!-- FOOTER START -->
    <script src="js/foot.js"></script>
    <!-- FOOTER END -->
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.downCount.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
<script src="js/custom.js"></script>
<script src="js/common.js"></script>
<script>
    $(function () {
        $("#userName").bind('input propertychange', function () {
            $.get(
                "/user/CheckNameServlet",
                {
                    username: $("#userName").val()
                },
                function (data, textStatus) {
                    console.log(textStatus);
                    if ($("#userName").val() == "") {
                        $("#msg").html(" ");
                    }
                    if (data == "true") {
                        $("#msg").html("用户名已经存在").css("color", "red");
                        $(":submit").attr("disabled", "disabled");
                    } else {
                        $("#msg").html(" ");
                        $(":submit").removeAttr("disabled");
                    }
                }
            );
        });
    })
    $().ready(function () {
        // 在键盘按下并释放及提交后验证提交表单
        $("#register").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 2
                },
                usertel: {
                    required: true,
                    minlength: 11,
                    isMobile: true
                },
                userpwd: {
                    required: true,
                    minlength: 5
                },
                repwd: {
                    required: true,
                    minlength: 5,
                    equalTo: "#pwd"
                },
                email: {
                    required: true,
                    email: true
                },
            },
            messages: {
                username: {
                    required: "请输入用户名",
                    minlength: "用户名不能小于两个字符"
                },
                usertel: {
                    required: "请输入手机号",
                    minlength: "手机号不能小于11位数字",
                    isMobile: "请正确填写手机号码"
                },
                userpwd: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母"
                },
                repwd: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母",
                    equalTo: "两次密码输入不一致"
                },
                email: "请输入一个正确的邮箱"
            }
        })
    });
    jQuery.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写");
</script>
</body>
</html>